<template>
  <div>
    <Row class="y_query_right">
      <Cascader :data="categoryList" @on-change="categorySelected" change-on-select clearable placeholder="产品分类"
                class="y_condition" style="text-align: left; min-width: 300px;" :value="searchParam.selectedCatIds"></Cascader>
      <Input type="text" v-model.trim="searchParam.search" clearable placeholder="产品SKU编号或产品名称"
             class="y_condition" style="min-width: 200px;"></Input>
      <Select v-model="searchParam.state" class="y_condition" placeholder="产品状态" clearable style="text-align: left;">
        <Option v-for="item in states" :value="item.value" :key="item.value">{{item.label}}</Option>
      </Select>
      <DatePicker type="daterange" :options="datePickerOptions" placement="bottom-end" :editable="false" placeholder="上/下架时间"
                  @on-change="changeTimeParam" class="y_condition" v-model="searchParam.selectedDate" style="max-width: 220px; width: 220px; text-align: left;"></DatePicker>
      <Button type="primary" icon="md-search" class="y_condition" @click="search()">查询</Button>
    </Row>
    <Table stripe border class="base_table" :columns="tableTitles" :data="productList"
           no-data-text="暂无数据" @on-selection-change="selectionChange"></Table>
    <div style="text-align: right;">
      <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum" @on-change="pageNumChange"
            @on-page-size-change="pageSizeChange" :page-size-opts="page.options"
            show-sizer show-elevator></Page>
    </div>
  </div>
</template>

<script>
import productData from "./js/productData";
import {createCategoryCascader, createCategoryList, getProductCommonData} from "../../js/commonUtils";
import commonData from "../js/stand/common_data";


export default {
  name: "ProductSelection",
  props: {
    isSingleSelect: {type: Boolean, default: false},
  },
  data() {
    return {
      yunPath: this.$store.getters.imgPrefix,
      productList: productData.tData.list,
      page: productData.tPage,
      searchParam: productData.tParam,
      categoryList: commonData.categoryList,
      states: productData.tStatus.states,
      datePickerOptions: productData.tStatus.datePickerOptions,
    }
  },
  methods: {
    selectionChange(selection) {
      productData.tData.selectedList = selection;
    },
    pageNumChange(pageNum) {
      productData.tPage.pageNum = pageNum;
      this.$emit("query-list");
    },
    pageSizeChange(pageSize) {
      productData.tPage.pageNum = 1;
      productData.tPage.pageSize = pageSize;
      this.$emit("query-list");
    },
    search() {
      productData.tPage.pageNum = 1;
      this.$emit("query-list");
    },
    categorySelected(value, selectedData) {
      //选择分类后的条件如果改变后要修改productBatchSequenceView方法里的判断条件
      if (0 < selectedData.length) {
        this.searchParam.categoryId = selectedData[selectedData.length - 1].value;
        this.searchParam.categoryLevel = selectedData[selectedData.length - 1].level;
      } else {
        this.searchParam.categoryId = '';
        this.searchParam.categoryLevel = 1;
      }
    },
    getProductState(state) {
      let element = this.states.find(element => element.value == state);
      return element==null?"":element.label;
    },
    changeTimeParam(dateArr, type) {
      this.searchParam.startTime = dateArr[0];
      this.searchParam.endTime = dateArr[1];
    },
    getDateStr(date) {
      return date==null?"":this.$tiyBJTime(new Date(date).getTime());
    }
  },
  computed: {
    tableTitles() {
      let self = this;
      return [
        this.firstColumn,
        // {title: "序号", type: 'index', width: 80, align: 'center'},
        {title: 'SKU', align: 'center', width: 150, key: 'code'},
        {title: "产品名称", align: "left", key: "name", tooltip: true},
        {title: "上/下架时间", align: "center", width: 150, key: "lastmodify", render(h, params) {
            return h("span", self.getDateStr(params.row.lastmodify));
          }},
        {title: "状态", align: "center", width: 120, render(h, params) {
            let stateName = self.getProductState(params.row.state);
            return h("span", stateName);
          }},
        {title: "产品图片", align: "center", width: 100,
          render(h, params) {
            let showImage = params.row.showImage;
            if(showImage == null) {
              return h("");
            }
            let imgUrl = "";
            if(showImage.zipImages!=null && showImage.zipImages!='') {
              let zipImages = self.$toJson(showImage.zipImages);
              for(let zipImg of zipImages) {
                if(zipImg.size == "200w") {
                  imgUrl = zipImg.imagePath;
                  break;
                }
              }
            }

            if(imgUrl == "") {
              imgUrl = showImage.originalImagePath;
            }

            let yunPath = self.yunPath;
            if(imgUrl!=null && imgUrl!="") {
              return h("img", {
                attrs: {src: yunPath + imgUrl,},
                style: {display: "inline-block", maxHeight: "60px", maxWidth: "60px", verticalAlign: "middle", margin: "5px;"},
              });
            }
          }
        },
      ];
    },
    firstColumn() {
      if(this.isSingleSelect) {
        return {
          align: "center",
          width: 80,
          render(h, params) {
            return h("input", {
              on: {
                click() {
                  productData.tData.selectedList.splice(0);
                  productData.tData.selectedList.push(params.row);
                }
              },
              attrs: {
                name: "product",
                type: "radio",
                value: params.row.id,
              },
              style: {
                margin: 0,
                width: "20px",
                height: "20px",
                verticalAlign: "middle",
              },
            }, "");
          }
        };
      }
      return {type: 'selection', width: 80, align: 'center'};
    }
  },
  mounted() {
    if(commonData.categoryList.length == 0) {
      let types = [];
      types.push(3);//查询产品分类
      getProductCommonData(this, commonData.categoryList.categoryList, types, true, createCategoryCascader);
    }
  },
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../../css/base.less";
</style>
